<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul li{
			height: 500px;
			list-style: none;
		}
		span{
			position: fixed;
			right: 30px;
			bottom: 30px;
			width: 32px;
			cursor: pointer;
			display: none;
		}
	</style>
</head>
<body>

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

<span>回到顶部</span>

<script src="../lib/jquery.min.js"></script>
<script>

	$(window).on('scroll',function() {
		var $this = $(this),
			h = $this.height(),
			st = $this.scrollTop();

		if(h < st) {
			$('span').css({
				'top' : h - 80
			}).show();
		}else{
			$('span').hide();
		}
	})

	$('span').on('click',function() {
		$('span').animate({top : 30},200)
		$('body').animate({scrollTop : 0},300);
	})



</script>
	
</body>
</html>